<template>
	<view class="tree-view" style="overflow: hidden;" :style="{height:scrollHeight+'px'}">

		<view class="searchBar x-f" style="border: 1px solid #fff;background-color: #f3f3f3;">

			<uni-search-bar v-model="treeSearchValue" style="padding: 0 !important; z-index: 1;flex: 1;" :radius="0"
				placeholder="请输入" clearButton="auto" cancelButton="none" @confirm="searchTree" @clear="clearSearch">
				<template #searchIcon>
					<view></view>
				</template>
			</uni-search-bar>

			<view class="x-c" style="width: 34px;" @click="onSearchBtn">
				<uni-icons type="search" size="20"></uni-icons>
			</view>
		</view>


		<scroll-view :scroll-y="true" class="scroll-Y" :style="{height: treeBoxHeihgt+ 'px'}" style="width: 100%;">

			<view v-show="newTreeData.length == 0" class="x-c"
				style="width: 100%;min-height: 200px;font-size: 12px;color: #999;">
				<text>未查到关键字</text>
			</view>

			<view v-for="(node, index) in newTreeData" :key="index">
				<m-tree-node :node="node" :level="0" :selected-id="selectedId" :search-value="searchValue"
					:search-key="searchTreeKey" @update:selectedId="onSelected" />
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'm-tree-view',
		props: {
			treeData: {
				type: Array,
				required: true,
				default: () => []
			},
			searchTreeKey: {
				type: String,
				default: 'label'
			},
			scrollHeight: {
				type: [String, Number],
				default: () => {
					return 300
				},
			}
		},
		data() {
			return {
				treeSearchValue: "", // 搜索框value
				searchValue: '', // 待传递value
				selectedId: null,
				newTreeData: [],
				treeBoxHeihgt: 300,
			};
		},
		watch: {
			treeData: {
				handler(nval) {
					this.newTreeData = JSON.parse(JSON.stringify(this.treeData));
				},
				deep: true,
				immediate: true
			},
			scrollHeight() {
				this.changeLeftTreeHeight();
			},
		},
		mounted() {
			let that = this;
			this.$nextTick(() => {

				that.changeLeftTreeHeight();
			})
		},
		methods: {
			changeLeftTreeHeight() {
				let that = this;
				uni.createSelectorQuery().select('.searchBar').boundingClientRect(data => {
					console.log(that.scrollHeight);
					console.log(data);
					let scrollHeight = that.scrollHeight - data.height;
					that.treeBoxHeihgt = scrollHeight - 20 - 80;
				}).exec();
			},
			onSearchBtn() {
				this.searchTree({
					value: this.treeSearchValue
				})
			},
			searchTree(data) {
				if (this.searchValue == data.value) {
					return
				}

				this.searchValue = data.value;
				if (uni.$m.utils.isEmpty(this.searchValue)) {
					this.newTreeData = JSON.parse(JSON.stringify(this.treeData));
					return;
				}


				const filterTree = (nodes) => {
					let filtered = [];

					for (let node of nodes) {
						let newNode = {
							...node
						};

						if (newNode.children && newNode.children.length > 0) {
							newNode.children = filterTree(newNode.children);
						}

						const matchSelf = newNode[this.searchTreeKey]?.includes(this.searchValue);
						const matchChild = newNode.children && newNode.children.length > 0;

						if (matchSelf || matchChild) {
							filtered.push(newNode);
						}
					}

					return filtered;
				};

				this.newTreeData = filterTree(this.treeData);
			},
			clearSearch() {
				this.searchTree({
					value: ""
				});
			},
			onSelected(id) {
				this.selectedId = id;
				this.$emit('choice', id);
			}
		}
	};
</script>

<style scoped lang="scss">
	.tree-view {
		padding: 10px;
	}
</style>